<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>title</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <style>
        body {
            padding-top: 1.5rem;
        }

        .header {
            width: 94%;
            height: 2.5rem;
            line-height: 2.5rem;
            padding: 0.5rem 0.8rem;
            text-align: center;
            background-color: #fff;
            position: fixed;
            top: 1.5rem;
        }

        .header_img {
            width: 10%;
            height: 58%;
            float: left;
            margin-top: 1rem;
        }

        .header_img img {
            width: 100%;
            height: 100%;
        }

        .header ul {
            width: 60%;
            height: 3rem;
            margin: 0.5rem 0rem 0rem 25%;
        }

        .header ul li {
            width: 20%;
            height: 3rem;
            margin: 0rem 0.5rem;
            line-height: 3rem;
            text-align: center;
            float: left;
        }

        .header ul li a {
            color: #ccc;
            font-size: 1.2rem;
        }

        .li {
            border-bottom: 0.2rem solid black;
        }

        #a {
            color: black;
            font-weight: bold;
        }

        .img {
            width: 100%;
            height: 60%;
            margin-top: 4rem;
        }

        .img img {
            width: 100%;
            height: 100%;
        }

        .nav {
            width: 85%;
            height: 2.7rem;
            background-color: #40cccc;
            color: #fff;
            padding: 0.5rem 0.8rem;
            margin: 0.5rem auto;
            border-radius: 0.5rem;
        }

        .nav_left {
            width: 22%;
            height: 1.1rem;
            border: 1px solid #fff;
            line-height: 1.1rem;
            border-radius: 1rem;
            float: left;
        }

        .nav_left p {
            width: 80%;
            height: 1rem;
            padding-left: 1.5rem;
        }

        .left_img {
            width: 25%;
            height: 100%;
            float: left;
            background-color: #fff;
            border-bottom-left-radius: 0.5rem;
            border-top-left-radius: 0.5rem;
        }

        .left_img img {
            width: 100%;
            height: 100%;
        }

        .nav_right {
            width: 50%;
            height: 2.5rem;
            float: left;
        }

        .all {
            width: 100%;
            height: 100vh;
            background-color: rgb(242, 242, 242, 0.5);
        }

        .text {
            width: 94%;
            height: 5rem;
            padding: 0.5rem 0.8rem 1rem 0.8rem;
            background-color: #fff;
        }

        .main {
            width: 93%;
            padding: 0.5rem 0.8rem;
            height: 50%;
            margin-top: 0.4rem;
            background-color: #fff;
        }

        .main_top {
            width: 100%;
            height: 4rem;
            line-height: 3.5rem;
        }

        .fl {
            float: left;
        }

        .fr {
            float: right;
        }

        .main_imgs {
            width: 10%;
            height: 55%;
            margin-left: 0.2rem;
            margin-top: 0.2rem;

        }

        .main_r {
            width:50%;
            text-align: right;
        }

        .main_imgs img {
            width: 100%;
            height: 100%；
        }
    </style>
    </style>
</head>

<body>
    <div class="header">
        <div class="header_img">
            <img src="../image/u6.png" alt="">
        </div>
        <ul>
            <li class="li"><a href="#" id="a">课程</a></li>
            <li><a href="#">评论</a></li>
            <li><a href="#">详情</a></li>
        </ul>
    </div>
    <div class="img">
        <img src="../image/a5.png" alt="">
    </div>
    <div class="nav">
        <div class="nav_left">
            <div class="left_img">
                <img src="../image/u55.png" alt="">
            </div>
            <p>2人团</p>
        </div>
        <span style="font-weight:bold;margin-left:0.2rem;">￥5681.00</span>
        <p style="font-size:0.8rem;width:50%;margin-top:0.5rem;">单买价：￥7770.00</p>
        <!-- <div class="nav_right">
      <p>限时购</p>
      <span>00</span>
      <span>:</span>
      <span>24</span>
      <span>:</span>
      <span>50</span>
    </div> -->
    </div>
    <div class="all">
        <div class="text">
            <h4>英孚英语</h4>
            <p style="color:#ccc;margin-top:0.5rem;font-size:1.1rem;">英孚4-6岁英语</p>
            <p style="color:#ccc;margin-top:0.5rem; float:left">市场价：￥7770.00</p>
            <p style="color:#40cccc;margin-top:0.5rem;font-size:1.5rem;float:right">￥5680.00</p>
        </div>
        <div class="main">
            <div class="main_top">
                <p class="fl" style="color:#ccc;">优惠</p>
                <div class="main_r fr">
                    <p class="fl" style="color:#40cccc;">全网低价，显示抢购</p>
                    <div class="main_imgs fl">
                        <img src="../image/a11.png">
                    </div>
                </div>
            </div>
            <div class="main_top">
                <p class="fl" style="color:#ccc;">内容</p>
                <div class="main_r fr">
                    <p class="fl" style="color:#ccc;">未选择</p>
                    <div class="main_imgs fl">
                        <img src="../image/a11.png">
                    </div>
                </div>
            </div>
            <div class="main_top">
                <p class="fl" style="color:#ccc;">阶段</p>
                <div class="main_r fr">
                    <p class="fl" style="color:#ccc;">未选择</p>
                    <div class="main_imgs fl">
                        <img src="../image/a11.png">
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript">
    apiready = function() {

    };
</script>

</html>
